<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" v-for="(o, index) in cardList" :key="index">
        <el-card class="box-card">
          <div slot="header" class="clearfix" :bodyStyle="{ display: 'flex' }">
            <h4>{{ o.title }}</h4>
            <el-button
              style="float: right; padding: 0"
              type="text"
              @click="jump(o.path)"
              >跳转</el-button
            >
          </div>
          <div>
            <span>总计：</span>
            <span>{{ o.num }}</span>
          </div>
          <div>
            <span>同比：上</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="padding-top: 10px;">
      <el-col :span="18">
        <el-card class="box-card">
          <area-echart style="width: 100%;"></area-echart>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <rose-echart ref="roseEchart" style="width: 100%;"></rose-echart>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="padding-top: 10px">
      <el-col :span="12">
        <el-card class="box-card">
          <column-echart ref="columnEchart"></column-echart>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <map-echart ref="mapEchart"></map-echart>
        </el-card>
      </el-col>
    </el-row>

    <!-- <div id="myChart" style="width: 600px;height: 500px;"></div> -->
  </div>
</template>

<script>
import mapEchart from "./HomeModule/mapEchart";
import areaEchart from "./HomeModule/areaEchart";
import roseEchart from "./HomeModule/roseEchart";
import columnEchart from "./HomeModule/columnEchart";

// Vue.prototype.$echarts = echarts
require("echarts"); // echarts theme
export default {
  name: "chart",
  components: { mapEchart, areaEchart, roseEchart, columnEchart },
  data() {
    return {
      chart: null,
      options: {},
      listArr: [], //城市json
      max: "", //最大value值
      min: "", // 最小value值
      type: 0,
      cardList: [
        {
          title: "食品安全",
          num: "2324",
          path: "/foodSafety"
        },
        {
          title: "信用监管",
          num: "3353"
        },
        {
          title: "行政执法",
          num: "545"
        },
        {
          title: "一品一码",
          num: "33334"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    jump(path) {
      console.log(path);
      this.router.path(path);
    }
  }
};
</script>

<style scoped>
.home {
  display: flex;
  justify-content: space-around;
}

.left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.buttom {
  width: 200px;
  margin: 20px;
}

#myChart {
  width: 400px;
  height: 400px;
}
</style>
